﻿@page "/tests/spinkit"
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>SpinKit examples</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Default spinner colors that can be changed with theme settings.</CardText>
            </CardBody>
            <CardBody>
                @foreach ( var type in Enum.GetValues<SpinKitType>() )
                {
                    <Tooltip Text="@($"Type: {type}")" Inline>
                        <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                            <SpinKit Type="@type" />
                        </Div>
                    </Tooltip>
                }
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Custom colors</CardTitle>
            </CardHeader>
            <CardBody>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Plane" Color="#ffcc00" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Chase" Color="#a1309b" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Bounce" Color="#8a6de8" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Wave" Color="#90d980" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Pulse" Color="#e6e167" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Flow" Color="#c9754f" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Swing" Color="#f21d41" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Circle" Color="#47b1d1" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.CircleFade" Color="#77c0ed" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Grid" Color="#3e7054" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Fold" Color="#36403a" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Wander" Color="#ff4a3d" />
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>

<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Custom sizes</CardTitle>
            </CardHeader>
            <CardBody>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Plane" Color="#ff4a3d" Size="20px" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Plane" Color="#ff4a3d" Size="60px" />
                </Div>
                <Div Display="Display.InlineBlock" Padding="Padding.Is4">
                    <SpinKit Type="SpinKitType.Plane" Color="#ff4a3d" Size="80px" />
                </Div>
            </CardBody>
        </Card>
    </Column>
</Row>